<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    
</body>
<script>
    // 组合模式用来创建动态的html结构

    class CreateBox{
        constructor(id,inner){
            this.ele = document.createElement("div")
            this.ele.className = "box";
            this.ele.innerHTML = inner;
            this.ele.id = id
            this.children = [];
        }
        add(child){
            this.children.push(child);
            this.ele.appendChild(child.getElement());
        }
        remove(child){
            this.ele.removeChild(child.getElement())
            for(var i=0;i<this.children.length;i++){
                if(this.children[i] === child){
                    this.children.splice(i, 1)
                    break;
                }
            }
        }
        border(){
            this.ele.style.border = "solid 2px black";
            for(var i=0;i<this.children.length;i++){
                this.children[i].border()
            }
        }
        none(){
            this.ele.style.border = "";
            for(var i=0;i<this.children.length;i++){
                this.children[i].none()
            }
        }
        getElement(){
            return this.ele;
        }
    }


    class CreateItem{
        constructor(src){
            this.ele = document.createElement("img")
            this.ele.src = src
        }
        add(child){
            console.log("img对象不能添加子对象")
        }
        remove(child){
            console.log("img对象不能删除子对象")
        }
        border(){
            this.ele.style.border = "solid 2px black";
        }
        none(){
            this.ele.style.border = "";
        }
        getElement(){
            return this.ele;
        }
    }


    var box = new CreateBox("box", "hello box")
    document.body.appendChild(box.getElement())
    console.log(box)

    var child1 = new CreateBox("child1","hello child")
    console.log(child1)

    var item1 = new CreateItem("./sh1.jpg")
    console.log(item1)


    box.add(child1)
    child1.add(item1)

    // box.border();
    child1.border();

</script>
</html>